<template>
  <div id="app">
    <router-view/>
    <bottom-navbar :navTabs="navTabs" @change-tab="changeTab">
      <!-- <router-link v-for="item in footer" :key="item.id" :to="item.path" >
        <div @click="isClick(item.id)">
          <img :src="require('@/static/images/'+(item.falg?item.redIcon:item.icon))"><br>
          <span >{{item.text}}</span>
        </div>
      </router-link> -->
    </bottom-navbar>
  </div>
</template>

<script>
import BottomNavbar from '@/components/BottomNavbar.vue'

export default{
  name: 'App',
  data(){
    return{
      navTabs: 
      [
        {
          "title": "首页",
          "icon": "nav-icon-home.png",
          "activeIcon": "nav-icon-home-active.png",
          "path": 'Home'
        },
        {
          "title": "商品分类",
          "icon": "nav-icon-category.png",
          "activeIcon": "nav-icon-category-active.png",
          "path": 'Category'
        },
        {
          "title": "购物车",
          "icon": "nav-icon-cart.png",
          "activeIcon": "nav-icon-cart-active.png",
          "path": 'Cart'
        },
        {
          "title": "个人中心",
          "icon": "nav-icon-user.png",
          "activeIcon": "nav-icon-user-active.png",
          "path": 'User'
        }
      ],
    }
  },
  components:{
    'bottomNavbar': BottomNavbar
  },
  
  methods:{
    changeTab(index){
      console.log("changeTab:"+index);
      this.$router.push({
        name:'123'
      }).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          // 如果错误不是 NavigationDuplicated，则重新抛出
          throw err;
        }
        // 对于 NavigationDuplicated 错误，可以选择忽略或记录日志
        console.warn('Ignored redundant navigation to:', this.$route.fullPath);
      });
      this.$router.push({name:this.navTabs[index].path})
    },
  }
}
</script>

<style>

</style>
